<template>
  <view class="container">
    <!-- 顶部区域 -->
    <view class="header">
      <view>
        <view class="app-name">小匠</view>
        <view class="app-desc">一站式工业设计任务交易平台</view>
      </view>
      <image class="header-icon" src="/static/header-icon.png" mode="aspectFit"></image>
    </view>

    <!-- 中间空白区域，用于占位 -->
    <view class="middle-space"></view>

    <!-- 按钮区域 -->
    <view class="button-group">
      <button class="login-btn" @click="handleLogin">登录</button>
      <button class="visitor-btn" @click="handleVisitor">游客模式</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 登录按钮点击事件
const handleLogin = () => {
  console.log('点击登录');
  // 这里可以添加登录逻辑，比如跳转到登录页
  uni.navigateTo({ url: '/pages/login/login' });
};

// 游客模式按钮点击事件
const handleVisitor = () => {
  console.log('点击游客模式');
  // 这里可以添加游客模式逻辑，比如进入首页等 
  uni.navigateTo({ url: '/pages/home/home' });
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #e6f7ef, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  box-sizing: border-box;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 150rpx;
}

.app-name {

  font-size: 80rpx;
  font-weight: bold;
  color: #00bfa5;
  margin-bottom: 20rpx;
}

.app-desc {
  font-size: 32rpx;
  color: #00796b;
}

.header-icon {
  width: 200rpx;
  height: 200rpx;
  margin-left: 20rpx;
  /* margin-top: 50rpx; */
}

.middle-space {
  flex: 1;
}

.button-group {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 100rpx;
}

.login-btn {
  background-color: #00bfa5;
  color: #ffffff;
  font-size: 36rpx;
  border-radius: 50rpx;
  width:654rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.visitor-btn {
  background-color: #ffffff;
  color: #00bfa5;
  border: 2rpx solid #00bfa5;
  font-size: 36rpx;
  border-radius: 50rpx;
  width:654rpx;
  height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
